import React, { memo, useEffect, useState } from 'react'
import { NavLink } from 'react-router-dom'
import { Image, Pagination } from 'antd'
import moment from 'moment'

// 导入常量
import { PlaceholderImg, ImgError, AlbumArea } from '../../../constant/local-constant'
// 导入方法
import { getHotAlbum, getAllAlbum } from '../../../api/xindieApi'
import { MusicClubAlbumBox } from './style'
export default memo(function MusicClubAlbum() {
  // state   state 一定要给一个默认值 不然会有问题
  const [hotList, setHotList] = useState([])
  const [allList, setAllList] = useState([])
  const [total, setTotal] = useState(0)
  const [queryInfo, setQueryInfo] = useState({ offset: 0, limit: 30, area: "ALL" })
  const [currentPage, setCurrentPage] = useState(1)
  // ajax
  useEffect(() => {
    getHotAlbum().then(res => {
      // console.log(res.albums);
      setHotList(res.albums)
    })
  }, [])

  // 查询参数改变的时候
  useEffect(() => {
    // console.log('查询参数改变');
    getAllAlbum(queryInfo).then(res => {
      setTotal(res.total)
      setAllList(res.albums)
    })
  }, [queryInfo])

  // other handle
  // 点击 全部新碟，旁边的分类 的时候
  const changeQueryInfo = (item, e) => {
    e.preventDefault()
    let newQueryInfo = { ...queryInfo }
    newQueryInfo.area = item.id
    newQueryInfo.offset = 0
    setCurrentPage(1)
    setQueryInfo(newQueryInfo)

  }
  // 分页改变 page 是页码，pagesize 是每一页显示多少条
  const changePagination = (page, pageSize) => {
    console.log('页码是', page, '  每一页展示多少条', pageSize);
    let newQueryInfo = { ...queryInfo }
    if (newQueryInfo.limit != pageSize) {
      // 原先展示的条数，不等于 新的条数
      // 那就从第一页开始展示
      newQueryInfo.offset = 0
      page = 0
      setCurrentPage(1)
    } else {
      // 等于
      newQueryInfo.offset = (page - 1) * pageSize
      setCurrentPage(page)
    }
    newQueryInfo.limit = pageSize

    setQueryInfo(newQueryInfo)
  }
  return (
    <MusicClubAlbumBox>
      <div className="wrap">
        <div className="hot">
          <h2>热门新碟</h2>
          <div className="content">
            {
              hotList.slice(0, 10).map(item => {
                return (
                  <NavLink to="" className="content_item" key={item.id}>
                    <div className="pic">
                      <Image
                        width={228}
                        height={228}
                        src={item.picUrl}
                        preview={false}
                        fallback={ImgError}
                        placeholder={
                          <Image
                            preview={false}
                            width={228}
                            height={228}
                            src={PlaceholderImg}
                          />
                        }
                      />
                      <div className="pic_play"></div>
                    </div>
                    <div className="info">
                      <span>{item.name}</span>
                      <span className="otherColor">{item.artist.name}</span>
                      <span className="otherColor">{moment(item.publishTime).format("YYYY-MM-DD")}</span>
                    </div>
                  </NavLink>
                )
              })
            }
          </div>
        </div>
        <div className="all">
          <h2>
            全部新碟
            {
              AlbumArea.map(item => {
                return <a key={item.id} onClick={e => changeQueryInfo(item, e)} className={item.id == queryInfo.area ? "active" : ''}>{item.name}</a>
              })
            }
          </h2>
          <div className="content">
            {
              allList.map(item => {
                return (
                  <NavLink to="" className="content_item" key={item.id}>
                    <div className="pic">
                      <Image
                        width={228}
                        height={228}
                        src={item.picUrl}
                        preview={false}
                        fallback={ImgError}
                        placeholder={
                          <Image
                            preview={false}
                            width={228}
                            height={228}
                            src={PlaceholderImg}
                          />
                        }
                      />
                      <div className="pic_play"></div>
                    </div>
                    <div className="info">
                      <span>{item.name}</span>
                      <span className="otherColor">{item.artist.name}</span>
                      <span className="otherColor">{moment(item.publishTime).format("YYYY-MM-DD")}</span>
                    </div>
                  </NavLink>
                )
              })
            }
          </div>
          {/* 分页 */}
          <div className="fenye">
            <Pagination current={currentPage} defaultPageSize={30} total={total} onChange={changePagination} pageSizeOptions={[10, 20, 30]} />
          </div>
        </div>
      </div>

    </MusicClubAlbumBox>
  )
})
